<template>
    <div class="l-from-body" >
        <el-form :model="formData" :rules="rules" size="mini"  ref="form" label-width="88px" >
            <el-form-item label="执行小时" prop="hour">
                <el-input v-model.number="formData.hour" placeholder="请输入">
                </el-input>
            </el-form-item>
            <el-form-item label="执行分钟" prop="minute">
                <el-input v-model.number="formData.minute" placeholder="请输入">
                </el-input>
            </el-form-item>
            <el-form-item label="执行日" prop="type">
                <el-select v-model="formData.type" placeholder="请选择" @change="typeChange">
                    <el-option label="每日" value="day"></el-option>
                    <el-option label="每周" value="week"></el-option>
                    <el-option label="每月" value="month"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="每周" prop="week" v-if="formData.type=='week'">
                <l-select :options="weekOptions" v-model="formData.week" multiple placeholder="请选择">
                </l-select>
            </el-form-item>
            <el-form-item label="每月" prop="day" v-if="formData.type=='month'">
                <l-select :options="dayOptions" v-model="formData.day" multiple placeholder="请选择">
                </l-select>
            </el-form-item>
            <el-form-item label="执行月" prop="mounth" >
                <l-select :options="monthOptions" v-model="formData.mounth" multiple placeholder="请选择">
                </l-select>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
export default {
    props:{
    },
    data(){
        return {
            formData:{
                hour:'',
                minute:'',
                type:'day',
                week:'',
                day:'',
                mounth:'',
            },
            rules: {
                hour: [
                    { required: true, message: '执行小时不能为空' },
                    { pattern: /^(2[0-3]|[0-1]?\d)$/, message: '请输入0-23的有效正整数'}
                ],
                minute: [
                    { required: true, message: '执行分钟不能为空' },
                    { pattern: /^(?:[1-5]?\d)$/, message: '请输入0-59的有效正整数'}
                ],
                week: [
                    { required: true, message: '每周不能为空', trigger: 'change' }
                ],
                day: [
                    { required: true, message: '每月不能为空', trigger: 'change' }
                ],
                mounth: [
                    { required: true, message: '每月不能为空', trigger: 'change' }
                ],
            },
            weekOptions: [
                { value: "1", label: "周一" }, 
                { value: "2", label: "周二" }, 
                { value: "3", label: "周三" }, 
                { value: "4", label: "周四" },
                { value: "5", label: "周五" },
                { value: "6", label: "周六" }, 
                { value: "7", label: "周日" }],
            monthOptions: [
                { value: "1", label: "一月" }, 
                { value: "2", label: "二月" }, 
                { value: "3", label: "三月" }, 
                { value: "4", label: "四月" }, 
                { value: "5", label: "五月" }, 
                { value: "6", label: "六月" }, 
                { value: "7", label: "七月" },
                { value: "8", label: "八月" }, 
                { value: "9", label: "九月" },
                { value: "10", label: "十月" },
                { value: "11", label: "十一月" },
                { value: "12", label: "十二月" }
            ],
            dayOptions: [
                { value: "1", label: "1号" }, 
                { value: "2", label: "2号" }, 
                { value: "3", label: "3号" },
                { value: "4", label: "4号" },
                { value: "5", label: "5号" },
                { value: "6", label: "6号" },
                { value: "7", label: "7号" },
                { value: "8", label: "8号" },
                { value: "9", label: "9号" },
                { value: "10", label: "10号" },
                { value: "11", label: "11号" },
                { value: "12", label: "12号" },
                { value: "13", label: "13号" },
                { value: "14", label: "14号" },
                { value: "15", label: "15号" },
                { value: "16", label: "16号" },
                { value: "17", label: "17号" },
                { value: "18", label: "18号" },
                { value: "19", label: "19号" },
                { value: "20", label: "20号" },
                { value: "21", label: "21号" },
                { value: "22", label: "22号" },
                { value: "23", label: "23号" },
                { value: "24", label: "24号" },
                { value: "25", label: "25号" },
                { value: "26", label: "26号" },
                { value: "27", label: "27号" },
                { value: "28", label: "28号" },
                { value: "29", label: "29号" },
                { value: "30", label: "30号" },
                { value: "31", label: "31号" }],
 
        }
    },
    computed:{
    },
    created () {
    },
    methods:{
        typeChange(){
            this.formData.week = ''
            this.formData.day = ''
            this.$nextTick(() => {
                this.$refs.form.clearValidate()
            })
        },
        resetForm(){
            this.$refs.form && this.$refs.form.resetFields()
        },
        // 校验表单
        validateForm(callback){
            this.$refs.form.validate((valid) => {
                if(valid){
                    callback()
                }
            });
        },
        setForm(data){
            this.formData = this.$deepClone(data)   
        },
        getForm(){
            const formData = this.$deepClone(this.formData)                      
            return formData
        }
    }
}
</script>